<template>
  <el-container id="rule-protect">
    <el-header class="header">
      <v-header ref="vHeader" title="规则维护" :saveShow="true" :showDownloadBtn="false"></v-header>
    </el-header>

    <el-container class="content-wrap">
      <el-container class="content">
        <!-- 常用规则查询条件标签 -->
        <el-header class="header content-item">
          <v-pageHeader ref="pageHeader" @on-click="showList" :InquireTransCode="InquireTransCode"
            :setTransCode="setTransCode"
            :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"
            num="02"></v-pageHeader>
        </el-header>

        <!-- 规则查询条件 -->
        <div class="conditions content-item">
          <div class="form">
            <div class="form-group">
              <span class="control-label">规则名称</span>
              <el-input style="width: auto; height: 28px;" size="mini" placeholder="请输入规则名称"></el-input>
            </div>

            <div class="form-group">
              <span class="control-label">规则类型</span>
              <el-input style="width: auto; height: 28px;" size="mini" placeholder="请输入规则类型"></el-input>
            </div>
          </div>
          <div class="btns">
            <el-button size="mini" type="primary">查询</el-button>
            <el-button size="mini" @click.native="openRuleEditDialog('1')">新增</el-button>
          </div>
        </div>

        <!-- 规则查询结果 -->
        <div class="rules content-item">
          <el-table :data="rules" width="100%">
            <el-table-column prop="ruleName" label="规则名称" width=""></el-table-column>
            <el-table-column prop="ruleType" label="规则类型" width=""></el-table-column>
            <el-table-column prop="calcExpress" label="计算表达式" width=""></el-table-column>
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button @click.native="openRuleEditDialog('2', scope.row)" type="primary" size="mini">修改</el-button>
                <el-button @click.native="deleteRule(scope.row)" type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-container>
    </el-container>

    <!-- 新增规则、修改规则 弹框 -->
    <el-dialog title="新增规则"
      :visible.sync="ruleEditDialog"
      @close="handleRuleEditDialogClose">
      <el-form ref="formRef"
        label-position="left"
        label-width="100px"
        :inline="true"
        :model="formModels"
        :rules="formRules">
        <el-form-item label="规则名称" prop="ruleName" width="50%">
          <el-input v-model="formModels.ruleName" placeholder="请输入规则名称"></el-input>
        </el-form-item>

        <el-form-item label="规则类型" prop="ruleType" width="50%">
          <el-select v-model="formModels.ruleType" popper-class="zIndex-popper" placeholder="请选择规则类型">
            <el-option
              :key="i"
              :label="ruleType.label"
              :value="ruleType.value"
              v-for="(ruleType, i) in ruleTypes"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="规则参数A" prop="ruleParamA" width="50%">
          <el-input v-model="formModels.ruleParamA" placeholder="请输入规则参数A"></el-input>
        </el-form-item>

        <el-form-item label="规则参数B" prop="ruleParamB" width="50%">
          <el-input v-model="formModels.ruleParamB" placeholder="请输入规则参数B"></el-input>
        </el-form-item>

        <el-form-item label="规则参数C" prop="ruleParamC" width="50%">
          <el-input v-model="formModels.ruleParamC" placeholder="请输入规则参数C"></el-input>
        </el-form-item>

        <el-form-item label="规则计算" prop="ruleCalc" width="50%">
          <el-input v-model="formModels.ruleCalc" placeholder="请输入规则计算"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click.native="ruleEditDialog = false">取消</el-button>
        <el-button type="primary" @click.native="onSubmit">确定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script type="text/ecmascript-6">
import { VHeader, VPageHeader } from '../../../components'
import api from '../../../api/url'

export default {
  name: 'RuleProtect',

  components: {
    VHeader,
    VPageHeader
  },

  data () {
    return {
      InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
      setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
      delTransCode: api.DELETEBAARCHANAL, // 删除常用
      ruleEditDialog: false,
      dialogTitle: '',
      // 测试数据，后期要删除
      rules: [
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' },
        { id: '01', ruleName: '家庭收入计算', ruleType: '基础类', calcExpress: 'A>10000 一般 10000<A<15000 中等' },
        { id: '02', ruleName: '高危职业计算', ruleType: '复合类', calcExpress: '...' }
      ],
      // 测试数据，后期要删除
      ruleTypes: [
        {label: '基础类', value: '01'},
        {label: '复合类', value: '02'}
      ],
      formModels: {
        ruleName: '',
        ruleType: '',
        ruleParamA: '',
        ruleParamB: '',
        ruleParamC: '',
        ruleCalc: ''
      },
      formRules: {
        ruleName: [
          {required: true, message: '必须填写规则名称', trigger: ['change', 'blur']}
        ],
        ruleType: [
          {required: true, message: '必须选择规则类型', trigger: ['change', 'blur']}
        ],
        ruleParamA: [
          {required: true, message: '必须填写规则参数A', trigger: ['change', 'blur']}
        ],
        ruleParamB: [
          {required: true, message: '必须填写规则参数B', trigger: ['change', 'blur']}
        ],
        ruleParamC: [
          {required: true, message: '必须填写规则参数C', trigger: ['change', 'blur']}
        ],
        ruleCalc: [
          {required: true, message: '必须填写规则计算', trigger: ['change', 'blur']}
        ]
      }
    }
  },

  methods: {
    showList () {},

    openRuleEditDialog (operationType, row) {
      if (operationType === '1') { // 如果当前为 新增规则
        this.dialogTitle = '新增规则'
      } else if (operationType === '2' && row !== undefined) { // 如果当前为 修改规则
        this.dialogTitle = '修改规则'
      }

      this.ruleEditDialog = true
    },

    deleteRule (row) {},

    handleRuleEditDialogClose () {
      this.$refs['formRef'].resetFields()
    },

    onSubmit () {
      this.$refs['formRef'].validate(valid => {
        if (valid) {} else {}
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
#rule-protect
  height 100%
  overflow hidden

  & > .header
    padding 0
    height 56px !important

  .content-wrap
    padding 10px 0 20px 10px
    height calc(100% - 56px)

    .content
      width 100%
      overflow-y scroll

      .header
        height 50px !important
        z-index 49 !important

      .content-item
        padding 0 20px
        background-color #fff

      .conditions
        border-top 1px solid #d8dce5

        .form
          .form-group
            height 50px
            line-height 50px

            .control-label
              display inline-block
              margin-right 10px
              width 80px
              font-size 12px
              color #5a5e66

        .btns
          margin 30px 0 20px 0
          text-align right
      .rules
        margin 10px 0
        padding 20px 0 20px 10px
</style>
